<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	<body>
		<div id="app">
	         <!-- 需求：将数据字母进行反转 abc 反转之后 cba
			 方法：将数据拆分为数组，将数组进行反转，再将数组合并为字符串
			 函数：
			       1.split 拆分
				   2.reverse 反转数据
				   3.join('') 将数组转化为字符串
			  -->
			  用户输入：<input v-model="msg" /><br />
			  数据展现： {{msg.split('').reverse().join('')}}
			 <!-- 计算属性用法：将需要计算的操作通过特定的方式先行计算之后将结果进行展现 -->
			 计算属性：{{reverse}}
			 <hr />
			 <!-- 计算属性 计算属性如果调用多次，则有缓存的机制 只计算一次
			 方法调用没有缓存机制，所以调用多次则计算多次
			 如果一个计算重复调用时首选计算属性-->
			 {{reverse}}
			 {{reverse}}<br />
			 {{reverseMe2()}}{{reverseMe2()}}{{reverseMe2()}}
			 <!-- 计算方法-->
			 <button @click="reverseMe">第哦啊用方法</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
			        msg: 'abcbefg'
					
				},
				
				//定义计算属性
				computed: {
					//定义方法,必须得有返回值
					reverse(){
						console.log("计算执行")
						return this.msg.split('').reverse().join('')
					}
						
					},
					methods:{
						reverseMe(){
							console.log("方法执行")
							this.msg=this.msg.split('').reverse().join('')
						},
						reverseMe2(){
							console.log("方法执行")
							return this.msg.split('').reverse().join('')
						},
					}
				
			}) 
		</script>
	</body>
</html>>
